<template>
  <div id='course-list'>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input v-model="formInline.courseName" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="活动区域">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div class="addDiv">
        <el-button @click="createCourse">添加课程</el-button>
      </div>
       <el-table
          v-loading="isLoading"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="courseName"
            label="课程名称">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="sortNum"
            label="排序">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                :disabled="scope.row.isStatusLoading"
                @change="onStateChange(scope.row)"
               >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="editCourse(scope.row)">编辑</el-button>
              <el-button @click="$router.push(`/course/${scope.row.id}/section`)">内容管理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          :disabled="isLoading"
          >
          </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
import { getQueryCourses, changeState } from '@/services/course'

export default {
  name: 'courseList',
  components: {},
  data () {
    return {
      formInline: {
        currentPage: 1,
        pageSize: 10,
        courseName: null,
        status: null
      },
      tableData: [],
      isLoading: false,
      totalCount: 0
    }
  },
  methods: {
    editCourse (row) {
      this.$router.push(`/course/${row.id}/edit`)
    },
    createCourse () {
      this.$router.push('/course/create')
    },
    async onStateChange (row) {
      row.isStatusLoading = true
      const { data } = await changeState({
        courseId: row.id,
        status: row.status
      })
      if (data.code === '000000') {
        row.isStatusLoading = false
        this.$message.success(row.status === 1 ? '上架成功' : '下架成功')
      }
    },
    handleCurrentChange (val) {
      this.formInline.currentPage = val
      this.loadCourseList()
    },
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.formInline.currentPage = 1
      this.loadCourseList()
    },
    onSubmit () {
      this.loadCourseList()
    },
    async loadCourseList () {
      this.isLoading = true
      const { data } = await getQueryCourses(this.formInline)
      if (data.code === '000000') {
        data.data.records.forEach(item => {
          item.isStatusLoading = false
        })
        this.tableData = data.data.records
        this.totalCount = data.data.total
        this.isLoading = false
      }
    }
  },
  created () {
    this.loadCourseList()
  }
}

</script>
<style scoped>
.block{
  text-align: center;
  margin-top: 20px;
}
.addDiv{
  text-align: right;
  margin-top: 20px;
}
</style>
